<template>
  <div>

    <el-card class="box-card" style="width: 700px;margin: 0 auto;">
      <div class="applyDiv" >
        <p class="applyP" >物资编号:</p>
        <el-input class="applyInput" v-model="input" placeholder="物资编号" />
      </div>
      <div class="applyDiv" >
        <p class="applyP" >物资名称:</p>
        <el-input class="applyInput" v-model="input" placeholder="物资名称" />
      </div>
      <div class="applyDiv" >
        <p class="applyP" >数量:</p>
        <el-input class="applyInput" v-model="input" placeholder="数量" />
      </div>
      <div class="applyDiv" >
        <p class="applyP" >账号:</p>
        <el-input class="applyInput" v-model="input" placeholder="账号" />
      </div>
      <div class="applyDiv" >
        <p class="applyP" >姓名:</p>
        <el-input class="applyInput" v-model="input" placeholder="姓名" />
      </div>
      <div class="applyDiv" >
        <p class="applyP" >申请理由:</p>
        <el-input class="applyInput" v-model="input" placeholder="申请理由" />
      </div>
      <div class="applyDiv" >
        <p class="applyP" >上传附件:</p>
        <div style="float: left;margin-left: 80px;margin-top: 7px">
          <el-button type="" size="small" style="margin-left:10px;height: 38px;box-shadow: #ec6b45 0 0 5px;color:#ec6b45 ;border-radius: 10px"><i class="el-icon-download"></i>点击下载申请附件</el-button>
          <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-change="handleChange"
                  :file-list="fileList"
                  style="float:left;">
            <el-button type="" size="small" style="height: 38px;background-color:#ec6b45;color:white ;border-radius: 10px"><i class="el-icon-upload el-icon--right"></i>上传申请附件</el-button>
          </el-upload>
        </div>
      </div>
      <div class="applyDiv" >
        <p class="applyP" >申请时间:</p>
        <el-input class="applyInput" v-model="time" placeholder="申请时间" />
      </div>
      <div class="applyDiv" >
        <p class="applyP" >图片:</p>
        <el-input class="applyInput" v-model="input" placeholder="图片" />
      </div>
      <div class="applyDiv" >
        <div style="float: right;margin-top: 8px">
          <el-button size="small" style="width: 150px;background-color: #009BB3;color: white;" round>提交</el-button>
          <el-button size="small" style="width: 150px" round>重置</el-button>
        </div>
      </div>
    </el-card>



  </div>
</template>

<script>
export default {
  data() {
    return {
      time:'',

      circleUrl: "",//图片的路径
      ruleForm: {
        nameId: '',//物资编号
        name: '',//物资名称
        number: '',//物资数量
        account: '',//账号
        userName: '',//姓名
        desc: '',//理由
        region: '',//地址
        date1: '',//日期
        date2: '',//时间
        delivery: false,//开关默认关闭
//物资编号、物资名称、图片，均在上一个点击事件申请按钮后从数据库中获取
      },

      rules: {//定义表单验证规则
        nameId: [
          {required: true, message: '请输入物资编号', trigger: 'blur'},
          {min: 2, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入物资名称', trigger: 'blur'}
        ],
        number: [
          {required: true, message: '请输入物资数量', trigger: 'blur'}
        ],
        account: [
          {required: true, message: '请输入账号', trigger: 'blur'}
        ],
        userName: [
          {required: true, message: '请输入姓名', trigger: 'blur'}
        ],
        desc: [
          {required: true, message: '请填写申请理由', trigger: 'blur'}
        ],
        region: [
          {required: true, message: '请选择申请区域', trigger: 'change'}
        ],
        date1: [
          {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
        ],
        date2: [
          {type: 'date', required: true, message: '请选择时间', trigger: 'change'}
        ],
      }
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData(){
      this.time = this.getNowTime()
    },

    // 获取当前时间
    getNowTime() {
      const yy = new Date().getFullYear()
      const MM = (new Date().getMonth() + 1) < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1)
      const dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
      const HH = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours()
      const mm = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      return yy + '-' + MM + '-' + dd + ' ' + HH + ':' + mm + ':' + ss
    },
    uploading() {
      //设置上传文件弹窗
    },
    downloading() {
      // 设置下载已上传的文件
    },
    // 提交表单内容
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('进入成功！！');
          let url = 'http://localhost:18080/item/add-new'
          let data = 'id' + this.formName.nameId +
              'name' + this.formName.name +
              'inventory' + this.formName.number +
              'desc' + this.formName.desc;
          console.log('url======' + url);
          console.log('data=====' + data);
          // 提交表单信息的逻辑
          this.axios.post(url, data).then((response) => {
            let message = response.data.message;
            this.$message({
              message: '提交成功，等待管理员审核',
              type: 'success'
            });
            // 提交后返回物资申请界面
            this.$router.push({path: '/home/item/info'});//页面路由刷新
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style>
  .applyDiv{
    margin-top: 10px;
    height: 50px;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: #009bb3 0 0 5px;
    overflow: hidden
  }
  .applyP{
    float: left;
    margin-left: 10px
  }
  .applyInput{
    width: 500px;
    float: right;
    top: 5px;
    margin-right: 10px
  }

</style>